<template>
  <div class="mo-fang-tabs">
    <Tabs
      v-model="activeTab"
      :tabList="tabList"
      title="创新方案"
      listUrl="/channel/mo_fang/list?type=0"
      @tab-click="handleSelect"
      :showTabs="false"
    ></Tabs>
    <iep-no-data v-if="!programList.length" complex></iep-no-data>
    <ProgramCard :itemList="programList"></ProgramCard>
    <div class="more" @click="handleMore">加载更多</div>
  </div>
</template>
<script>
import Tabs from './Tabs'
import ProgramCard from './ProgramCard'
import { getShopList } from '@/api/product'
import { mapGetters } from 'vuex'
export default {
  components: { Tabs, ProgramCard },
  data () {
    return {
      activeTab: '',
      programList: []
    }
  },
  computed: {
    ...mapGetters(['dictGroup']),
    tabList () {
      // const v = this.dictGroup.size
      //   ? this.dictGroup.get('dms_plan_type').map(m => ({
      //     value: m.value,
      //     label: m.label
      //   }))
      //   : []
      const v = []
      return [
        {
          value: '',
          label: '全部'
        },
        ...v
      ]
    }
  },
  mounted () {
    this.loadList()
  },
  methods: {
    handleSelect () {
      this.loadList()
    },
    loadList () {
      this.$http({
        url: this.$http.adornUrl(getShopList().url),
        method: getShopList().method
      }).then(({ data }) => {
        const list = [...data.data].slice(0, 4)
        this.programList = list
      })
    },
    handleMore () {
      this.$router.push('/all-product')
    }
  }
}
</script>
<style lang="scss" scoped>
.mo-fang-tabs {
  margin: 0 auto 30px;
  width: 1200px;
  .more {
    margin-top: 15px;
    color: #999;
    text-align: right;
    cursor: pointer;
  }
}
</style>
